<template>
  <div class="detailedInformation-containner">
    <div>
      <div class="outMore">
        <div class="dataTitle">
          详细信息
          <div class="titleRight" >
            <i class="el-icon-arrow-left titleIcon"></i> <router-link to="/controlStation">返回</router-link>
          </div>
        </div>
      </div>
      <div class="tadayTime">
        <span id="tadayText">今天</span>{{this.topTime}}
      </div>
      <el-row>
        <el-col :span="8" class="leftCol">
          <div class="dataContent contentBorder">
            <div class="dataView">
              <div class="viewTitle">
                总设备数
                <div class="titleNumber">{{this.allEquip}}</div>
              </div>
              <div>
                <div class="startingDevice">
                  已启动
                  <div class="sub-title">{{this.allEquipOpen}}</div>
                </div>
                <el-table
                  class="leftTable"
                  :data="openEquip"
                  height="288"
                  style="width: 100%">
                  <el-table-column
                    prop="equip_cid"
                    label="已启用">
                  </el-table-column>
                </el-table>
              </div>
              <div>
                <div class="startingDevice">
                  未启动
                  <div class="sub-titleTwo">{{this.allEquipClose}}</div>
                </div>
                <el-table
                  class="leftTable"
                  :data="closeEquip"
                  height="288"
                  style="width: 100%">
                  <el-table-column
                    prop="equip_cid"
                    label="未启用">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" class="centerCol">
          <div class="dataContent contentBorder">
            <div class="dataView">
              <div class="viewTitle">
                总开机时长(h)
                <div class="titleNumber">{{this.allEquipTime}}</div>
              </div>
              <el-table
                :data="detailedData"
                :header-cell-style="{background:'#F0F2F7'}"
                height="673"
                style="width: 100%">
                <el-table-column
                  prop="equip_cid"
                  label="出厂编号"
                  sortable
                  width="240">
                </el-table-column>
                <el-table-column
                  prop="equip_type"
                  sortable
                  label="类型">
                </el-table-column>
                <el-table-column
                  prop="total_run_time"
                  label="开机时长(h)"
                  sortable
                  width="135">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
        <el-col :span="8" class="rightCol">
          <div class="dataContent contentBorder">
            <div class="dataView">
              <div class="viewTitle">
                总起重量(T)
                <div class="titleNumber">{{this.allEquipWidth}}</div>
              </div>
              <el-table
                :data="detailedData"
                :header-cell-style="{background:'#F0F2F7'}"
                height="673"
                style="width: 100%">
                <el-table-column
                  prop="equip_cid"
                  label="出厂编号"
                  sortable
                  width="200">
                </el-table-column>
                <el-table-column
                  prop="equip_type"
                  sortable
                  label="类型">
                </el-table-column>
                <el-table-column
                  prop="total_weight"
                  label="起重量(T)"
                  sortable
                  width="135">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import { Navbar, Sidebar, AppMain } from '../layout/components'
  import axios from 'axios'
  export default {
    name: 'detailedInformation',
    components: {
      Navbar,
      Sidebar,
      AppMain
    },
    data() {
      return {
        topTime: '',
        detailedData: [],
        allequipData: [],
        openEquip: [],
        closeEquip: [],
        allEquip: '',
        allEquipOpen: '',
        allEquipClose: '',
        allEquipTime: '',
        allEquipWidth: '',
        getEquipBodytwo: {
          access_token: localStorage.getItem('access_token'),
          type: 'console_get_equip_run_statis',
          datas: []
        },
        getColligateBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'abstract_get_condition',
          data: {
            condition: {
            },
            page: {
              page_size: '100',
              page_number: '1'
            }
          }
        }
      }
    },
    mounted() {
      this.drawLine()
      this.getAllData()
    },
    methods: {
      returnIndex() {
        this.$router.push({ path: '/controlStation/index' })
      },
      getAllData() {
        axios.post('/console', this.getEquipBodytwo, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.allequipData = res.data.datas
          this.allEquip = this.allequipData[8].value
          this.allEquipOpen = this.allequipData[9].value
          this.allEquipClose = this.allequipData[10].value
          this.allEquipTime = this.allequipData[4].value
          this.allEquipWidth = this.allequipData[5].value
        })
          .catch(function(error) {
            console.log(error)
          })
        axios.post('/console', this.getColligateBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.detailedData = res.data.data.items
          for (let i = 0; i < res.data.data.items.length; i++) {
            if (res.data.data.items[i].equip_run === true) {
              this.openEquip.push({ equip_cid: res.data.data.items[i].equip_cid })
            } else {
              this.closeEquip.push({ equip_cid: res.data.data.items[i].equip_cid })
            }
          }
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      drawLine() {
        var weekShow = ''
        if (new Date().getDay() === 1) {
          weekShow = '一'
        } else if (new Date().getDay() === 2) {
          weekShow = '二'
        } else if (new Date().getDay() === 3) {
          weekShow = '三'
        } else if (new Date().getDay() === 4) {
          weekShow = '四'
        } else if (new Date().getDay() === 5) {
          weekShow = '五'
        } else if (new Date().getDay() === 6) {
          weekShow = '六'
        } else if (new Date().getDay() === 7) {
          weekShow = '七'
        }
        this.topTime = (new Date().getFullYear() + '.' + (new Date().getMonth() + 1) + '.' + new Date().getDate() + ' ' + '星期' + weekShow)
      }
    }
  }

</script>
<style scoped>
  .homeNav{
    width: 100%;
    height: 50px;
    background-color: #25B6C7;
  }
  .detailedInformation-containner{
    width: 100%;
    min-height: 500px;
    font-size: 16px;
    color: #25B6C7;
  }
  /deep/ .outMore{
    height: 40px;
    padding-top: 2px;
    margin: 20px 20px 0px 20px;
    border-bottom: 1px solid #E1E1E1;
  }
  /deep/ .dataTitle {
    padding-left: 5px;
    border-left: 5px solid #25B6C7;
    height: 16px;
    font-size: 16px;
    color: #323842;
  }
  /deep/ .startingDevice {
    width: 100%;
    height: 49px;
    color: #69727E;
    font-size: 14px;
    font-weight: bold;
    border-top: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;
    background: #F0F2F7;
    padding: 15px 20px;
  }
  /deep/ .titleRight {
    float: right;
    font-size: 14px;
    color: #25B6C7;
    cursor: pointer;
  }
  /deep/ .titleNumber {
    float: right;
    font-size: 32px;
    color: #25B6C7;
    line-height: 20px;
  }
  /deep/ .sub-title {
    float: right;
    font-size: 24px;
    color: #25B6C7;
    line-height: 20px;
  }
  /deep/ .sub-titleTwo {
    float: right;
    font-size: 24px;
    color: #69727E;
    line-height: 20px;
  }
  /deep/ .titleIcon {
    font-weight: bold;
  }
  /deep/ .gutter {
    background: #F0F2F7;
  }
  .el-row {
    margin: 0px 20px;
  }
  /deep/ .leftTable > .el-table__header-wrapper{
    display: none;
  }
  /deep/ .el-table th {
    padding: 6px 0px 7px 0px;
    border-top: 1px solid #E1E1E1;
    border-bottom: 1px solid #E1E1E1;
  }
  /deep/ #tadayText {
    font-weight: bold;
    margin-right: 20px;
  }
  /deep/ .tadayTime {
    margin: 0px 20px 20px 20px;
    font-size: 18px;
    height: 40px;
    padding:10px 0px 0px 20px;
    vertical-align:middle;
    background: #F0F2F7;
    color: #25B7C8;
  }
  .datasValueFather {
    overflow-y: auto;
    height: 678px;
  }
  .leftCol {
    padding-right: 10px;
  }
  .centerCol {
    padding: 0px 10px;
  }
  .rightCol {
    padding-left: 10px;
  }
  .dataContent {
    height: 775px;
  }
  .contentBorder {
    border: 1px solid #E1E1E1;
  }
  .dataView {
    width: 100%;
    height: 98%;
  }
  .viewTitle {
    color: #323842;
    font-size: 20px;
    height: 20px;
    font-weight: bold;
    margin: 40px 20px;
  }
</style>
